<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        header{
            padding: 10px;
            border: 1px solid black;
            position: relative;
        }
        div{
            width: 200px;
            height: 200px;
            background-color: pink;
            position: relative;
        }
        main{
            height: 1000px;
            background-image: linear-gradient(red,yellow,blue);
        }

    </style>
</head>
<body>
    <header><div></div></header>
    <main></main>    
    <script>
        var div = document.querySelector("div");
        div.onclick = function(e){
            console.log("你点我试试");
            // event 事件对象
            // e.preventDefault() 组织事件默认事件
            // e.stopPropagation() 阻止事件传播
            // e.cancelBubble = true; 阻止事件冒泡
            // e.target 获取触发事件的标签
            // 事件对象.属性  获取鼠标位置

            // 获取鼠标距离浏览器视图窗口的偏移量,上下会含有body的外边距8px
            console.log(e.clientX);   
            console.log(e.clientY);     // min 18
            // 获取鼠标距离当前触发事件标签的偏移量
            // console.log(e.offsetX);
            // console.log(e.offsetY); 

            // 获取鼠标距离文档的偏移量,上下会含有body的外边距8px
            // console.log(e.pageX);
            // console.log(e.pageY);   // min 18

            // 获取最近的设置有定位属性的父级标签的偏移量，到html为止
            // console.log(e.layerX);  // min 0
            // console.log(e.layerY);  // min -1
        }
    </script>
</body>
</html>